<template>
  <m-popover
    ref="popover"
    :width="400"
    :ok-text="item ? $t('Edit') : $t('Submit')"
    @ok="_ok"
    @close="close"
  >
    <template slot="content">
      <div class="permission-model">
        <el-tabs
          v-model="activeName"
          style="padding: 0 10px;"
          type="card"
          v-if="showLabes"
        >

          <el-tab-pane
            :label="item.label"
            :name="item.name"
            v-for="(item, key) in tabList"
            :key="key"
          >
            <keep-alive :include="['function','project','resource','dataOrigin','UDF']">
              <component :is="item.app"></component>
            </keep-alive>
          </el-tab-pane>
        </el-tabs>
      </div>
    </template>
  </m-popover>

</template>
<script>
  import { mapGetters } from 'vuex'
  import mPopover from '@/module/components/popup/popover'
  const files = require.context('./component', false, /\.vue$/)
  export default {
    name: 'permission-dialog',
    data () {
      return {
        activeName: 'function',
        showLabes: false,
        tabList: [
          { label: '功能授权', name: 'function', app: null },
          { label: '项目授权', name: 'project', app: null },
          { label: '资源授权', name: 'resource', app: null },
          { label: '数据源授权', name: 'dataOrigin', app: null },
          { label: 'UDF函数授权', name: 'UDF', app: null },
        ],
      }
    },
    // provide () {
    //   return {
    //     roleInfo: null
    //   }
    // },
    computed: {
      ...mapGetters('role', [
        'currentRole'
      ]),
      ...mapGetters('permission', [
        'permissions'
      ])
    },
    created () {
      for (let index = 0; index < this.tabList.length; index++) {
        const element = this.tabList[index]
        element.app = files(`./${element.name}.vue`).default
      }
      this.$nextTick(() => {
        this.showLabes = true
      })
    },
    methods: {
      close () {
        this.$emit('close')
      },
      _ok () {
        // 提交
        console.log('permissions', this.permissions)
        this.$emit('close')
      },
    },
    components: { mPopover }
  }
</script>
<style lang="scss" scoped>
/deep/.permission-model {
  .el-tabs__nav {
    border: 0;
    border-left: 0.5px solid rgba(51, 49, 126, 1);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }
  .el-tabs__item {
    height: 30px;
    line-height: 30px;
    border: 1px solid rgba(51, 49, 126, 1);
    color: #33317e;
    &:last-child {
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
    }
    &:first-child {
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
    }
    &.is-active {
      background-color: #33317e;
      color: #fff;
    }
  }
}
</style>
